<template>
  <el-row>
    <el-col :span="24">
      <div class="logo">
        <img src="../../public/images/logol.jpg" class="logo-img" >
        </div>
      <el-menu active-text-color="#white" class="el-menu-vertical-demo" :default-active="active_value||active" text-color="#fff" background-color="#303133" mode="vertical"  @select="send">
        <!-- 首页 -->
        <router-link :to="{ name: 'index' }">
          <el-menu-item index="1">
            <el-icon>
              <HomeFilled />
            </el-icon>
            <span>首页</span>
          </el-menu-item>
        </router-link>
        <!-- 分类管理 -->
        <router-link :to="{ name: 'category' }">
          <el-menu-item index="2">
            <el-icon>
              <List />
            </el-icon>
            <span>分类管理</span>
          </el-menu-item>
        </router-link>
        <!-- 商品管理 -->
        <router-link :to="{ name: 'goods' }">
          <el-menu-item index="3">
            <el-icon>
              <List />
            </el-icon>
            <span>商品管理</span>
          </el-menu-item>
        </router-link>
        <el-sub-menu  default-active="2" >
          <template #title>
            <el-icon>
              <Setting />
            </el-icon>
            <span>管理</span>
          </template>
        <!-- 用户管理-->
        <router-link :to="{ name: 'user' }">
          <el-menu-item index="4">
            <el-icon>
              <List />
            </el-icon>
            <span>用户管理</span>
          </el-menu-item>
        </router-link>
        <!-- 角色管理 -->
        <router-link :to="{ name: 'role' }">
          <el-menu-item index="5">
            <el-icon>
              <List />
            </el-icon>
            <span>角色管理</span>
          </el-menu-item>
        </router-link>
      </el-sub-menu>
        <!-- 个人中心 -->
        <router-link :to="{ name: 'setting' }">
          <el-menu-item index="6">
            <el-icon>
              <Setting />
            </el-icon>
            <span>个人中心</span>
          </el-menu-item>
        </router-link>
      </el-menu>
    </el-col>
  </el-row>
</template>
  
<script setup>
import { HomeFilled, Setting, List } from '@element-plus/icons-vue'
import { ref ,defineEmits,defineProps} from 'vue'
import router from '../router'
const props=defineProps({
  active_value:{
    type:String
  }
})
const menuIndex = {
  index: '1',
  category: '2',
  goods: '3',
  user:'4',
  role:'5',
  setting: '6'
}
const emit=defineEmits(["header_title"])
const active = ref(menuIndex[router.currentRoute.value.name] || '0')

const send=(key)=>{
    active.value=key;
  emit("header_title",key);
}

</script>
  
<style lang="scss" scoped>
.el-menu {
  border: 0 !important;
  .is-active {
    background: linear-gradient(90deg, #1493fa, #01c6fa) !important
  }
  a {
    text-decoration: none;
    color: white;
  }
}
.logo{
  width: 60px;
  height: 60px;
  margin: auto ;
}
.logo-img{
  width: 60px;
  height: 60px;
}
</style>